<!--
 * @Description: 
 * @Author: yucheng
 * @Date: 2024-07-20
 * @LastEditors: 余承
 * @LastEditTime: 2024-09-09
-->
<template>
  <div class="home">
    <div class="search-box">
      <div class="search-item">
        <span>流域选择：</span>
        <Select v-model:value="searchParams.basin" :options="basinData" style="width: 120px;"
          @change="getPlanData"></Select>
      </div>
      <div class="search-item">
        <span>预报方式：</span>
        <Select v-model:value="searchParams.yubaoType" :options="yubaoTypeData" style="width: 120px;"></Select>
      </div>
      <div class="search-item">
        <span>预报方案列表：</span>
        <Select v-model:value="searchParams.planCode" :options="planData" style="width: 120px;"></Select>
      </div>
      <div class="search-item">
        <span>预报类型：</span>
        <Select v-model:value="searchParams.type" :options="typeData" style="width: 120px;"
          @change="getPlanData"></Select>
      </div>
      <Button type="primary" @click="handleSearch">查询</Button>
      <div class="checkbox">
        <span>
          是否显示地质
        </span>
        <Checkbox v-model="showGeo" @change="toggleShowGeo"></Checkbox>
      </div>
    </div>
    <h1 class="title">{{ title }}</h1>
    <!-- <Tree ref="treeRef" :searchParams="searchParams"></Tree> -->
    <div class="player">
      <Player ref="playerRef" :times="times"></Player>
    </div>
    <div class="legend">
      <Legend></Legend>
    </div>

  </div>
</template>

<script lang='ts' setup>
import { Button, Select, Checkbox } from 'ant-design-vue'
import { onMounted, reactive, ref, computed } from 'vue'
import Tree from './Tree.vue'
import Player from '@/views/home/Player.vue'
import Legend from './Legend.vue'
import { getPlan, getTFI } from '@/api/common'


const basinData = [
  {
    label: '西辽河',
    value: 'lyxlh'
  },
  {
    label: '察汗淖尔',
    value: 'lychnr'
  },
  {
    label: '大黑河',
    value: 'lydhh'
  }
]

const yubaoTypeData = [
  {
    label: '手动预报',
    value: '1'
  },
  {
    label: '自动预报',
    value: '2'
  },
]

const planData = ref<{ label: string, value: string }[]>([])

const typeData = [
  {
    label: '丰水期',
    value: '75'
  },
  {
    label: '平水期',
    value: '50'
  },
  {
    label: '枯水期',
    value: '25'
  },
]

const searchParams = reactive({
  basin: 'lyxlh',
  type: '75',
  planCode: '',
  yubaoType: '1',
})

const title = computed(() => {
  if(!times.value.length) return ''
  const area = basinData.find((item: any) => item.value === searchParams.basin)!.label + '流域'
  const curTime = times.value[playerRef.value.currentTimeIndex] ?? {}
  const { year, month } = curTime
  return area + ' ' + year + '年' + month + '月' + '地下水埋深预测'
})

const showGeo = ref(false)

const toggleShowGeo = () => {
  const mapWinodw = (document.getElementById('map')! as HTMLIFrameElement).contentWindow!
  // @ts-ignore
  mapWinodw.changeDisplayMode()
  showGeo.value = !showGeo.value
}

const getPlanData = async () => {
  const { data } = await getPlan({
    basinCodes: searchParams.basin,
    yubaoType: searchParams.yubaoType,
  })
  planData.value = data.map((item: any) => {
    return {
      label: item.planName,
      value: item.planCode
    }
  })
}

const handleSearch = async () => {
  if (searchParams.basin === '') {
    console.error('请选择流域');
    return
  }
  if (searchParams.type === '') {
    console.error('请选择预报类型');
    return
  }
  if (searchParams.planCode === '') {
    console.error('请选择预报方案');
    return
  }
  if (searchParams.yubaoType === '') {
    console.error('请选择预报方式');
    return
  }
  const planeName = planData.value.find((item: any) => item.value === searchParams.planCode)!.label
  await getPlayerData(planeName)
  treeRef.value?.updateTreeData()
  playerRef.value.seek(0)
}

const times = ref<Record<string, any>[]>([])

const getPlayerData = async (planName: string) => {
  const [start, end] = planName.substring(0, 15).split('~')
  const [startYear, startMonth] = start.split('.').map(item => +item)
  const [endYear, endMonth] = end.split('.').map(item => +item)
  const dataList = []
  for (let index = startMonth; index < 13; index++) {
    dataList.push({
      label: `${startYear}.${index < 10 ? '0' + index : index}`,
      year: startYear,
      month: index
    })
  }
  for (let index = 1; index < endMonth; index++) {
    dataList.push({
      label: `${endYear}.${index < 10 ? '0' + index : index}`,
      year: endYear,
      month: index
    })
  }
  const tifs = await Promise.all(dataList.map(async (item: any, index: number) => {
    const res = await getTFI({
      ...searchParams,
      month: item.month + '',
      year: item.year + ''
    })
    return {
      year: item.year,
      month: item.month,
      time: item.label,
      tif: res
    }
  }))
  times.value = tifs
}

const treeRef = ref<any>()

const playerRef = ref<any>()

onMounted(async () => {
  await getPlanData()
  searchParams.planCode = planData.value[0]?.value ?? ''
})

</script>

<style lang='scss' scoped>
.home {
  width: 100%;
  height: 100%;
}

.search-box {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: 1080px;
  height: 60px;
  color: #fff;
  z-index: 100;

  .search-item {
    display: flex;
    align-items: center;
    min-width: 200px;
  }

  .checkbox {
    white-space: nowrap;

    span {
      margin-right: 4px;
    }
  }
}

.title {
  position: absolute;
  top: 100px;
  left: 50%;
  font-size: 20px;
  color: #fff;
  transform: translateX(-50%);
}

.player {
  position: absolute;
  // left: 329px;
  left: 20px;
  right: 20px;
  top: calc(100% - 112px);
}

.legend {
  position: absolute;
  right: 10px;
  top: calc(100% - 110px);
}
</style>